<template>
  <view class="container">
	<u-subsection :list="list" :current="current" fontSize="16" @change="changeIndex"></u-subsection>	
	<view class="addStore">
		<!-- 货品 -->
		<view class="addStore-list" v-if="current==0">
			<!-- <view class="addStore-list-item">
				<view class="addStore-list-item-leftContent">订单编号:</view>
				<view class="addStore-list-item-input">
					<u--input placeholder="点击输入订单编号" border="none" v-model="name" inputAlign="right"></u--input>
				</view>
			</view> -->
			<view class="addStore-list-item" style="border-bottom:2rpx solid #F2F2F2;" @click="changeDropdownList(0)">
				<view class="addStore-list-item-leftContent">分类</view>
				<view class="addStore-list-item-input">
					<view class="" style="color: black;" v-if="className">
						{{className}}
					</view>
					<view v-if="!className">
						<u-icon name="arrow-right" color="#aeaeae" size="14"></u-icon>
					</view>
					<view class="" v-if="!className">
						请选择分类
					</view>
				</view>
			</view>
			<view class="addStore-list-item" style="border-bottom:2rpx solid #F2F2F2;" @click="changeDropdownList(6)">
				<view class="addStore-list-item-leftContent">货品</view>
				<view class="addStore-list-item-input">
					<view class="" style="color: black;" v-if="goodsName">
						{{goodsName}}
					</view>
					<view v-if="!goodsName">
						<u-icon name="arrow-right" color="#aeaeae" size="14"></u-icon>
					</view>
					<view class="" v-if="!goodsName">
						请选择货品
					</view>
				</view>
			</view>
			<view class="addStore-list-item">
				<view class="addStore-list-item-leftContent">数量:</view>
				<view class="addStore-list-item-input">
					<u--input placeholder="点击输入数量" border="none" v-model="number" inputAlign="right"></u--input>
				</view>
			</view>
		</view>
		<!--  -->
		<view class="addStore-list" v-if="current==1">
			<view class="addStore-list-item" style="border-bottom:2rpx solid #F2F2F2;" @click="changeDropdownList(1)">
				<view class="addStore-list-item-leftContent">叉车</view>
				<view class="addStore-list-item-input">
					<view class="" style="color: black;" v-if="forkliftName">
						{{forkliftName}}
					</view>
					<view v-if="!forkliftName">
						<u-icon name="arrow-right" color="#aeaeae" size="14"></u-icon>
					</view>
					<view class="" v-if="!forkliftName">
						请选择叉车
					</view>
				</view>
			</view>
			<view class="addStore-list-item">
				<view class="addStore-list-item-leftContent">数量:</view>
				<view class="addStore-list-item-input">
					<u--input placeholder="点击输入数量" border="none" v-model="number" inputAlign="right"></u--input>
				</view>
			</view>
		</view>
		<!-- 托盘 -->
		<view class="addStore-list" v-if="current==2">
			<view class="addStore-list-item" style="border-bottom:2rpx solid #F2F2F2;" @click="changeDropdownList(2)">
				<view class="addStore-list-item-leftContent">托盘</view>
				<view class="addStore-list-item-input">
					<view class="" style="color: black;" v-if="trayName">
						{{trayName}}
					</view>
					<view v-if="!trayName">
						<u-icon name="arrow-right" color="#aeaeae" size="14"></u-icon>
					</view>
					<view class="" v-if="!trayName">
						请选择托盘
					</view>
				</view>
			</view>
			<view class="addStore-list-item">
				<view class="addStore-list-item-leftContent">数量:</view>
				<view class="addStore-list-item-input">
					<u--input placeholder="点击输入数量" border="none" v-model="number" type="number" inputAlign="right"></u--input>
				</view>
			</view>
		</view>
		<!-- 货位 -->
		<view class="addStore-list" v-if="current==3">
			<view class="addStore-list-item" style="border-bottom:2rpx solid #F2F2F2;" @click="changeDropdownList(3)">
				<view class="addStore-list-item-leftContent">货架</view>
				<view class="addStore-list-item-input">
					<view class="" style="color: black;" v-if="Shelves1">
						{{Shelves1}}
					</view>
					<view v-if="!Shelves1">
						<u-icon name="arrow-right" color="#aeaeae" size="14"></u-icon>
					</view>
					<view class="" v-if="!Shelves1">
						请选择货架
					</view>
				</view>
			</view>
			<view class="addStore-list-item" style="border-bottom:2rpx solid #F2F2F2;" @click="changeDropdownList(7)">
				<view class="addStore-list-item-leftContent">货位</view>
				<view class="addStore-list-item-input">
					<view class="" style="color: black;" v-if="locationname">
						{{locationname}}
					</view>
					<view v-if="!locationname">
						<u-icon name="arrow-right" color="#aeaeae" size="14"></u-icon>
					</view>
					<view class="" v-if="!locationname">
						请选择货位
					</view>
				</view>
			</view>
			<view class="addStore-list-item">
				<view class="addStore-list-item-leftContent">数量:</view>
				<view class="addStore-list-item-input">
					<u--input placeholder="点击输入数量" border="none" v-model="number" type="number" inputAlign="right"></u--input>
				</view>
			</view>
		</view>
		<!-- 货架 -->
		<view class="addStore-list" v-if="current==4">
			<view class="addStore-list-item" style="border-bottom:2rpx solid #F2F2F2;" @click="changeDropdownList(4)">
				<view class="addStore-list-item-leftContent">仓库</view>
				<view class="addStore-list-item-input">
					<view class="" style="color: black;" v-if="warehouseName">
						{{warehouseName}}
					</view>
					<view v-if="!warehouseName">
						<u-icon name="arrow-right" color="#aeaeae" size="14"></u-icon>
					</view>
					<view class="" v-if="!warehouseName">
						请选择仓库
					</view>
				</view>
			</view>
			<view class="addStore-list-item" style="border-bottom:2rpx solid #F2F2F2;" @click="changeDropdownList(8)">
				<view class="addStore-list-item-leftContent">货架</view>
				<view class="addStore-list-item-input">
					<view class="" style="color: black;" v-if="Shelves2">
						{{Shelves2}}
					</view>
					<view v-if="!Shelves2">
						<u-icon name="arrow-right" color="#aeaeae" size="14"></u-icon>
					</view>
					<view class="" v-if="!Shelves2">
						请选择货架
					</view>
				</view>
			</view>
			<view class="addStore-list-item">
				<view class="addStore-list-item-leftContent">数量:</view>
				<view class="addStore-list-item-input">
					<u--input placeholder="点击输入数量" border="none" v-model="number" type="number" inputAlign="right"></u--input>
				</view>
			</view>
		</view>
		<view class="footerBtn" @click="confirmInfo">
			提交
		</view>
		<u-picker :show="isShowArea" :columns="dropColumms" :defaultIndex="[0]" :immediateChange="true" keyName="name" ref="uPicker" @cancel="isShowArea=false" @confirm="comfirmTag"></u-picker>
	</view>
	<u-loading-page :loading="isShowLoading" bg-color="rgba(4,4,15,0.4000)">加载中...</u-loading-page>
  </view>
</template>
<script>
	import { getDropdownList,insertTaskAndAmt } from "@/api/otherTaskApi.js";
	export default {
		data() {
			return {
				list: ['货品','叉车','托盘', '货位','货架'],
				current: 0,
				name:null,
				isShowArea:false,
				dropdownList:[null,null,null,null,null],
				dropColumms:[],
				childrenLists:[],
				className:null,
				goodsName:null,
				targetId:null,
				number:null,
				forkliftName:null,
				trayName:null,
				Shelves1:null,
				locationname:null,
				warehouseName:null,
				Shelves2:null,
				isShowLoading:false
			}
		},
		onLoad() {

		},
		onShow() {
			this.getDropdownList();
		},
		methods: {
			changeDropdownList(index){
				if(index==6){
					if(!this.className){
						uni.showToast({ title: '请先选择分类', icon: 'none' })
					}else{
						if(this.childrenLists.length>0){
							this.dropColumms = [];
							this.dropColumms.push(this.childrenLists);
							this.isShowArea = true;
						}else{
							uni.showToast({ title: '请重新选择分类', icon: 'none' })
						}
					}
				}else if(index==7){
					if(!this.Shelves1){
						uni.showToast({ title: '请先选择货架', icon: 'none' })
					}else{
						if(this.childrenLists.length>0){
							this.dropColumms = [];
							this.dropColumms.push(this.childrenLists);
							this.isShowArea = true;
						}else{
							uni.showToast({ title: '请重新选择分类', icon: 'none' })
						}
					}
				}else if(index==8){
					if(!this.warehouseName){
						uni.showToast({ title: '请先选择仓库', icon: 'none' })
					}else{
						if(this.childrenLists.length>0){
							this.dropColumms = [];
							this.dropColumms.push(this.childrenLists);
							this.isShowArea = true;
						}else{
							uni.showToast({ title: '请重新选择分类', icon: 'none' })
						}
					}
				}else{
					this.dropColumms = [];
					this.dropColumms.push(this.dropdownList[index]);
					this.isShowArea = true;
				}
			},
			comfirmTag(e){
				this.childrenLists = [];
				if(e.value[0].type==0){
					this.goodsName=null;
					this.className = e.value[0].name;
					this.childrenLists = e.value[0].childrenList;
				}else if(e.value[0].type==6){
					this.goodsName = e.value[0].name;
					this.targetId = e.value[0].targetId;
					this.childrenLists = [];
				}else if(e.value[0].type==1){
					this.forkliftName = e.value[0].name;
					this.targetId = e.value[0].targetId;
				}else if(e.value[0].type==2){
					this.trayName = e.value[0].name;
					this.targetId = e.value[0].targetId;
				}else if(e.value[0].type==3){
					this.locationname = null;
					this.Shelves1 = e.value[0].name;
					this.childrenLists = e.value[0].childrenList;
				}else if(e.value[0].type==7){
					this.locationname =  e.value[0].name;
					this.targetId = e.value[0].targetId;
				}else if(e.value[0].type==4){
					this.Shelves2 = null;
					this.warehouseName = e.value[0].name;
					this.childrenLists = e.value[0].childrenList;
				}else if(e.value[0].type==8){
					this.Shelves2 = e.value[0].name;
					this.targetId = e.value[0].targetId;
				}
				this.isShowArea = false;
			},
			changeIndex(index){
				this.dropColumms = [];
				this.className=null;
				this.goodsName=null;
				this.targetId=null;
				this.number=null;
				this.forkliftName = null;
				this.trayName = null;
				this.locationname = null;
				this.warehouseName = null;
				this.Shelves2 = null;
				this.current = index;
			},
			async getDropdownList(){
				this.isShowLoading = true;
				let res = await getDropdownList();
				if(res.code==200){
					if(res.data.huopin.length>0){
						this.dropdownList[0] = res.data.huopin.map((element) => ({ name: element.className, type:'0',childrenList: element.baseMatList.map((element) => ({ targetId: element.matId, name: element.matName,type:'6' })) }));
					}
					if(res.data.chache.length>0){
						this.dropdownList[1] = res.data.chache.map((element) => ({ targetId: element.supplierId,type:'1', name: element.supplierName }));
					}
					if(res.data.tuopan.length>0){
						this.dropdownList[2] = res.data.tuopan.map((element) => ({ targetId: element.bomId,type:'2', name: element.childNo }));
					}
					if(res.data.huowei.length>0){
						this.dropdownList[3] = res.data.huowei.map((element) => ({ name: element.locationName,type:'3', childrenList: element.baseWorkshopList.map((element) => ({ targetId: element.workshopId, name: element.workshopName,type:'7' })) }));
					}
					if(res.data.huojia.length>0){
						this.dropdownList[4] = res.data.huojia.map((element) => ({ name: element.warehouseName,type:'4', childrenList: element.locationList.map((element) => ({ targetId: element.locationId, name: element.locationName,type:'8' })) }));
					}
					this.isShowLoading = false;
				}else{
					this.isShowLoading = false;
					uni.showToast({ title: res.msg, icon: 'none' })
				}
			},
			async confirmInfo(){
				this.isShowLoading = true;
				let data = {
					number:this.number,
					targetId:this.targetId,
					targetType:this.current
				}
				let res = await insertTaskAndAmt(data);
				if(res.code==200){
					this.isShowLoading = false;
					uni.showToast({ title: '提交成功', icon: 'none' });
					this.changeIndex(this.current);
				}else{
					this.isShowLoading = false;
					uni.showToast({ title: res.msg, icon: 'none' })
				}
			}
		}
	}
</script>

<style lang="scss">
	.addStore{
		&-list{
			width:100%;
			margin-top:40rpx;
			&-item{
				width: 100%;
				height:88rpx;
				margin:0 auto;
				padding:0 30rpx;
				box-sizing: border-box;
				border-top:2rpx solid #F2F2F2;
				display: flex;
				align-items: center;
				justify-content: space-between;
				&-leftContent{
					font-size: 30rpx;
					font-weight: 600;
					width:40%;
				}
				&-input{
					flex:1;
					text-align: right;
					color:#cccfd6;
					font-size: 30rpx;
					display: flex;
					align-items: center;
					flex-direction: row-reverse;
				}
			}
			
		}
		.footerBtn{
			width:580rpx;
			margin:0 auto;
			padding:15rpx 0;
			background: #478cbd;
			text-align: center;
			color: white;
			border-radius: 50rpx;
			margin-top:70rpx;
			margin-bottom:180rpx;
		}
	}
</style>
